<template>
    <div style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <native :title="title"></native>
      <div class="payment-home">
          <div class="payment-home-back">
            <img src="../assets/img/Z.svg" alt="">
            <div class="font-36" style="text-align: center;padding-top: 8px;">+{{hashNumber*computerPower}}</div>
            <div class="payment-font1">算力</div>
          </div>
          <div class="payment-home-bottom">
            <div class="payment-home-flex">
              <div class="font-z1">充值算力值</div>
              <div style="font-size: 14px;color: #6E59FF;font-family: axis;">{{hashNumber*computerPower}} 算力</div>
            </div>
            <div class="payment-home-flex">
              <div class="font-z1">充值金额</div>
              <div style="font-size: 14px;color: #888;font-family: axis;">{{hashPrice}}</div>
            </div>
            <div class="payment-home-flex" style="border: none;">
              <div class="font-z1">充值时间</div>
              <div style="font-size: 14px;color: #888;font-family: axis;">{{utils.dateZhuan(new Date())}}</div>
            </div>
          </div>
      </div>
    </div>

  </template>

  <script>
  import native from './public/native.vue'
  export default {
    name: 'payment',
    data () {
      return {
        title:'支付成功',
        hashNumber:0,
        hashPrice:'',
        computerPower:0
      }
    },  
    components:{
      native
    },
    computed: {
      
    },
    mounted() {
      this.hashNumber = Number(localStorage.getItem('hashNumber'));
      this.hashPrice = localStorage.getItem('hashPrice');
      this.computerPower = localStorage.getItem('computerPower');
    },
    methods: {
      
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .payment-home{
      padding:21px;
    }
    .payment-home-back{
      position: relative;
      img{
        width: 100%;
        position: absolute;
        top:0px;
      }
    }
    .payment-font1{
      font-size: 20px;
      text-align: center;
    }
    .payment-home-bottom{
      padding-top: 58px;
    }
    .payment-home-flex{
      display: flex;
      justify-content: space-between;
      padding: 20px 0px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  </style>
